<template>
	<view class="content">
		<view class="u-flex-xy-center title" :style="{'padding-bottom':item.long_title?'0 !important':''}">
			<text class="name">{{item.title}}</text>
			<view class="open_popover" @click="shut_down">
				<image :src="`${$http_cos}/static/open_popover.png`"></image>
			</view>
		</view>
		<text class="long_title" v-if="item.long_title">{{item.long_title}}</text>
		<view class="list"  v-if="item.modality=='add_input'">
			<view class="item u-flex-xy-center" v-for="(it,index) in item.array" :key="index">
				<text>{{it}}</text>
				<image :src="`${$http_cos}/static/delate.png`"  @click="delate(it,index)"></image>
			</view>
		</view>
		<view v-if="item.modality=='multipleSelection'">
			 <template v-for="it in item.array">
				 <yy-multipleselection v-model='modelValue'   :class="get_class(it)" @close="close()" :config="item" :config_item="it"></yy-multipleselection>
			 </template>		
		</view>
		<view v-if="item.modality=='textarea'" class="input_box_1">
			<u--textarea height="336" maxlength="60" :fixed='fixed' v-model="modelValue" placeholder="请简洁概括描述一下" class="textarea_style" ></u--textarea>
		</view>
		<view class="input_box" v-else-if="item.modality=='input'">
			<input :placeholder="placeholder" class="input_style"  v-model="modelValue" :type="is_input_type" 
				style="height:100%;padding: 0 30rpx;box-sizing: border-box;width:100%;"></input>
		</view>
		<view class="input_boxs" v-else-if="item.modality=='add_input'">
			<u-search v-model="search_value" searchIcon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E7%BC%96%E8%BE%91.png" :showAction="true" borderColor="#F3F4F6"  height="88" searchIconSize="34" bgColor="#F3F4F6;" actionText="添加"  @search="search" @custom="search" :actionStyle="{color:'#FF7612'}"></u-search>
		</view>
		<!-- <yy-input-radio v-model="" v-else-if="item.modality=='input-radio'"></yy-input-radio> -->
		<view v-else-if="item.modality=='input-radio'">
			<view class="input_box" >
				<input :placeholder="placeholder" class="input_style"  v-model="inputRadioValue" :type="is_input_type" 
					style="height:100%;padding: 0 30rpx;box-sizing: border-box;width:100%;"></input>
			</view>
			<view class="u-flex-xy-center"  @click="is_agrees=!is_agrees">
				
				<view class="agrees">
					
					<image :src="`${$http_cos}${is_agrees==true?'/static/3%20%283%29':'/static/2%20%284%29'}.png`">
					</image>
				</view>
				<text class="agree_txt">正式工(如果是正式工的请勾选)</text>
			</view>
		</view>
		
		<view class="submit" @click="submit">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'yyInput',
		props: {
			value:{
				type:[String,Array,Number],
				default:()=>{
					return ''
				}
			},
			config: {
					type: Object,
					default: ()=>{}
			},
		},
		watch: {
			is_agrees(val){
				if(val){
					this.modelValue=this.inputRadioValue+='(正式工)'
				}else{
					this.modelValue=this.inputRadioValue
				}
			}
		},
		computed:{
			placeholder(){
				return '请输入'+this.item.title
			},
				is_input_type(){
					this.item.input_type?this.item.input_type:'text'
				},
				inputRadioValue:{
					get:function(){
						let index=this.modelValue.indexOf('(正式工)')
						this.is_agrees=index!=-1
						if(index!=-1){
							return this.modelValue.substr(0,index)
						}else{
						
							return this.modelValue
						}
					},
					set:function(value){
						let resutltValue=value
						if(this.is_agrees) resutltValue+='(正式工)'
						this.modelValue=resutltValue
						
						// return resutltValue
					}
				},
		},
		data() {
			return {
				modelValue: this.value,
				item:this.config,
				fixed:false,
				is_agrees:true,
				search_value:'',
			}
		},
		onLoad() {
			
		},
		
		mounted() {
			
		},
		methods: {
			get_class(i){
				if(this.modelValue==''){
					return 'not_select'
				}
				let  array=this.modelValue.split(",")
				let exist=false
				array.forEach(it=>{
					if(it==i.name){
						exist=true
						return
					}
				})
				if(exist){
					return 'select'
				}else{
					return 'not_select'
				}
			},
			delate(item,i){
				this.item.array.splice(i,1)
				uni.$u.toast('删除标签名为'+item+'成功')
			},
			search(e){
				this.search_value=''
				this.item.array.push(e)
			},
			shut_down() {
				this.$emit('close')
			},
			slect_item() {
				this.item.is_agrees=!this.item.is_agrees
				
				this.$emit('input', this.modelValue)
			},
			submit() {
				let isclick = true
				if(this.item.input_type=='number'){
					if(uni.$u.test.mobile(this.modelValue)==false){
						return uni.$u.toast(this.item.title+'格式错误')
					}
				}
				if (isclick) {
					isclick = false
					let info = {
					}
					if(this.item.modality=='add_input'){
						if(this.item.array.length==0){
							return uni.$u.toast(this.modelValue+'不为空')
						}
						this.modelValue=this.item.array.join('/')
					}
					this.$emit("close");
					this.$emit('input', this.modelValue)
				}

			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		height: auto;
		max-height: 983rpx;
		// position: fixed;
		// bottom: 0;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.list{
			display: flex;
			flex-wrap: wrap;
			.item{
				height:80rpx;
				width: auto;
				padding:0 32rpx;
				box-sizing: border-box;
				background-color: #FFEEE2;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				text{
					color: #FF7612;
					font-size: 34rpx;
					display: block;
					margin-right: 32rpx;
				}
				image{
					width:25rpx;
					height:25rpx;
				}
			}
		}
		.long_title{
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #919191;
			display: block;
			padding:16rpx 0 24rpx ;
			box-sizing: border-box;
			text-align: center;
		}
		.title {
			padding: 50rpx 0 50rpx;
			box-sizing: border-box;
			position: relative;

			text {
				font-size: 34rpx;
				font-weight: 400;
				color: #111111;
			}

			.open_popover {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 8rpx;

			}
		}

		.multipleselection {
			width: 670rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;

			border-radius: 50rpx;
			margin-bottom: 20rpx;

			text {
				color: #FF7612;
				font-size: 34rpx;
			}

		}

		.tip_title {
			display: block;
			text-align: center;
			padding: 22rpx 0;
			box-sizing: border-box;
			color: #919191;
			font-size: 28rpx;
		}

		.select {
			border: 2rpx solid #FF7612;
			background-color: #FFEEE2;
		}

		.not_select {
			border: 2rpx solid #E1E1E1;
			background-color: #fff;
		}

		.agrees {
			width: 36rpx;
			height: 36rpx;
			margin-right: 16rpx;
			overflow: hidden;
		}

		.agree_txt {
			color: #111111;
			font-size: 34rpx;
		}
		.input_box_1{
			width:100%;
			height:auto;
			.textarea_style{
				background: #F3F4F6;
				// height:336rpx;
				// width:100%;
			}
		}
		.input_box {
			width: 100%;
			height: 88rpx;
			padding:0rpx 0 64rpx;
			// margin-top: 62rpx;
			// margin-bottom: 64rpx;
			
			.input_style{
				border:none;
				background: #F3F4F6;
				border-radius: 44rpx;
				outline: none;
				
			}
			input[type=text]:focus{ border:none }
			input[type=number]:focus{ border:none }
		}
		
		.submit {
			width: 100%;
			height: 108rpx;
			background: #FF7612;
			border-radius: 54rpx;
			color: #fff;
			text-align: center;
			line-height: 108rpx;
			// position: fixed;
			// bottom: 200rpx;
			margin: 56rpx auto 100rpx;
			box-sizing: border-box;

			text {
				font-size: 30rpx;
			}
		}
	}
</style>
